<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,
      initial-scale=1, maximum-scale=1, user-scalable=0" />
  <script async defer data-domain="johanhelsing.studio" src="https://plausible.helsing.studio/js/plausible.js"></script>


  <style>
    html {
      height: 100%;
      width: 100%;
      /* there is a sub-pixel width visible on the right in embeds, making it black makes it less noticeable */
      background: #000;
    }

    body {
      background: #282828;
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin: 0;
      display: flex;
      user-select: none;
      /* Avoid scrolling and other pesky behaviors on mobile */
      touch-action: none;
    }

    canvas {
      background: #282828;
      width: 100vw;
      height: 100%;
    }
  </style>

  <!-- Loading -->
  <style>
    :root {
      --main-bg-color: #282828;
      --logo-color: #d3aa77;
    }

    .jgjk_splash_bg {
      color: var(--logo-color);
      background: var(--main-bg-color);
      width: 100vw;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      z-index: 5;
      position: absolute;
      pointer-events: none;
      flex-direction: column;
      ;
    }

    .jgjk_splash_logo {
      width: 55%;
      aspect-ratio: 360 / 38;
      opacity: 0;
      pointer-events: none;
      margin: 1.2vmin;
    }

    .jgjk_splash_logo_visible {
      transition: opacity 0.4s ease-in;
      opacity: 1;
    }

    .jgjk_splash_logo_hidden {
      transition: opacity 0.6s ease-out;
      opacity: 0;
    }

    .jgjk_splash_hidden {
      opacity: 0;
      transition: opacity 0.4s ease-out;
    }

    .jgjk_loading_bar {
      display: block;
      width: 90vmax;
      max-width: 55%;
      visibility: visible;
      opacity: 1;
      transition: opacity 2s linear;
      display: flex;
      align-items: center;
      margin-bottom: 5vh;
    }

    @keyframes slide {
      100% {
        background-position: 100% 100%;
      }
    }

    .jgjk_loading_fill {
      height: 0.5vmin;
      min-height: 0.4vw;
      border-radius: 100vw;
      background: #ccc;
      width: 1%;
      /* transition: width 1s cubic-bezier(0.65, 0, 0.35, 1); */
      /* box-shadow: 0px 0px 1vmin 0px #000; */
      box-shadow: 0px 0px 0.3vmin 0px #000;
    }

    .jgjk_logo_text {
      fill: var(--logo-color);
    }
  </style>
</head>

<script type="module">
  window.addEventListener("touchstart", ev => ev.preventDefault());
  window.addEventListener("touchend", ev => ev.preventDefault());

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
  const logo = document.getElementsByClassName("jgjk_splash_logo")[0];
  const splash_bg = document.getElementsByClassName("jgjk_splash_bg")[0];
  const loading_fill = document.getElementsByClassName("jgjk_loading_fill")[0];

  let loadingFinished = false;
  let resolveLoading;
  window.jgjkSplash = {
    loadingFinished() {
      loadingFinished = true;
      resolveLoading && resolveLoading();
    },
    loadingProgress(progress) {
      loading_fill.style.width = `${progress * 100}%`
    }
  };

  await sleep(300);
  logo.classList.add("jgjk_splash_logo_visible");
  await sleep(2000);

  if (!loadingFinished) {
    // TODO: show the progress bar
    await new Promise(resolve => resolveLoading = resolve);
  }
  await sleep(300);

  // We're done :), hide the splash screen
  splash_bg.classList.add("jgjk_splash_hidden");

  // also try to focus the iframe
  document.getElementsByTagName("canvas")[0].focus()
</script>

<body oncontextmenu="return false">
  <div class="jgjk_splash_bg">
    <svg class="jgjk_splash_logo" width="117.5mm" height="19.05mm" version="1.1" viewBox="0 0 117.5 19.05" xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(-74.386 -117.66)">
      <path d="m137.4 117.66c-0.37253 0-0.67709 0.12686-0.91416 0.38086-0.23706 0.23706-0.35605 0.54214-0.35605 0.91467v16.205c0 0.37253 0.11899 0.68548 0.35605 0.93948 0.23707 0.23706 0.54163 0.35553 0.91416 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38138-0.56695 0.38138-0.93948v-6.7314c0-0.59267 0.13524-1.1342 0.40617-1.6252 0.28787-0.49106 0.68573-0.88053 1.1937-1.1684 0.52493-0.28787 1.1178-0.43201 1.7782-0.43201 0.71119 0 1.2616 0.14414 1.6511 0.43201 0.4064 0.28787 0.68579 0.67734 0.83819 1.1684 0.16933 0.49107 0.25373 1.0326 0.25373 1.6252v6.7314c0 0.37253 0.11847 0.68548 0.35553 0.93948 0.23707 0.23706 0.54214 0.35553 0.91468 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38137-0.56695 0.38137-0.93948v-6.7314c0-1.016-0.13576-1.947-0.40669-2.7936-0.254-0.84667-0.7027-1.5155-1.3462-2.0066-0.64347-0.50799-1.5493-0.76222-2.7177-0.76222-0.57574 0-1.1178 0.10169-1.6258 0.30489-0.50799 0.18626-0.97348 0.44049-1.3968 0.76223-0.4064 0.32173-0.75393 0.67713-1.0418 1.0666-0.04918 0.0707-0.08244 0.13965-0.1266 0.2098v-6.2549c0-0.37253-0.12738-0.67761-0.38138-0.91467-0.23706-0.254-0.53323-0.38086-0.88883-0.38086zm14.732 0c-0.37254 0-0.67709 0.12686-0.91416 0.38086-0.23707 0.23706-0.35553 0.54214-0.35553 0.91467v16.408c0 0.37253 0.11846 0.67709 0.35553 0.91416 0.23707 0.23706 0.54162 0.35605 0.91416 0.35605 0.3556 0 0.65228-0.11899 0.88935-0.35605 0.254-0.254 0.38085-0.55856 0.38085-0.91416v-0.63976c0.25822 0.2998 0.5539 0.59105 0.91416 0.86817 0.44027 0.32173 0.94821 0.59274 1.5239 0.81287 0.57573 0.2032 1.1854 0.30489 1.8288 0.30489 1.1515 0 2.1846-0.29617 3.099-0.88883 0.9144-0.6096 1.6425-1.4394 2.1844-2.4893 0.54186-1.0499 0.81287-2.2524 0.81287-3.607 0-1.3547-0.27101-2.5482-0.81287-3.5812-0.54187-1.0499-1.2784-1.8713-2.2097-2.4639-0.9144-0.59267-1.9644-0.88884-3.1497-0.88884-0.57573 0-1.1345 0.10169-1.6764 0.30489-0.52493 0.18627-0.99932 0.43998-1.4226 0.76171-0.4064 0.32174-0.74503 0.66036-1.016 1.016-0.03181 0.03976-0.04719 0.0783-0.07597 0.11783v-6.0358c0-0.37253-0.12685-0.67761-0.38085-0.91467-0.23707-0.254-0.53375-0.38086-0.88935-0.38086zm-36.271 2.2862c-0.3556 0-0.66016 0.12685-0.91416 0.38085-0.23707 0.23707-0.35553 0.54162-0.35553 0.91416v2.0066h-1.3973c-0.33867 0-0.62645 0.11008-0.86352 0.33022-0.22013 0.22013-0.33021 0.49952-0.33021 0.83819 0 0.32173 0.11008 0.60112 0.33021 0.83819 0.23707 0.22013 0.52485 0.33021 0.86352 0.33021h1.3973v7.5442c0 0.8128 0.11846 1.4476 0.35553 1.9048 0.23707 0.44026 0.53324 0.76211 0.88883 0.96531 0.37254 0.2032 0.75362 0.33006 1.1431 0.38086 0.38946 0.0508 0.72809 0.07596 1.016 0.07596 0.508 0 0.98187-0.12685 1.4221-0.38085 0.44027-0.254 0.66043-0.58424 0.66043-0.99064 0-0.32173-0.0844-0.57544-0.25373-0.76171-0.16934-0.18627-0.35543-0.27957-0.55863-0.27957s-0.38141 0.03407-0.53381 0.1018c-0.13547 0.06774-0.2964 0.10129-0.48266 0.10129-0.18627 0-0.37236-0.03355-0.55862-0.10129-0.16934-0.06773-0.30458-0.1951-0.40618-0.38137s-0.15245-0.43159-0.15245-0.73639v-7.4424h2.0319c0.33867 0 0.61806-0.11008 0.83819-0.33021 0.23707-0.22013 0.35554-0.49062 0.35554-0.81236 0-0.33866-0.11847-0.61805-0.35554-0.83819-0.22013-0.23706-0.49952-0.35605-0.83819-0.35605h-2.0319v-2.0066c0-0.37254-0.11846-0.67709-0.35553-0.91416-0.23707-0.254-0.54214-0.38085-0.91467-0.38085zm-12.852 2.8448c-1.1345 0-2.1672 0.29617-3.0985 0.88884-0.9144 0.59266-1.6425 1.4141-2.1844 2.4639-0.54187 1.0329-0.81287 2.2349-0.81287 3.6065 0 1.3377 0.271 2.5318 0.81287 3.5817 0.54187 1.0499 1.2784 1.8797 2.2097 2.4893 0.93134 0.59266 1.9813 0.88883 3.1497 0.88883 0.6604 0 1.2784-0.11008 1.8542-0.33021 0.57574-0.23707 1.0753-0.52485 1.4986-0.86352 0.36016-0.30253 0.63817-0.6128 0.86351-0.92759v0.57206c0 0.37253 0.11847 0.68548 0.35554 0.93948 0.23706 0.23706 0.54214 0.35553 0.91467 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38086-0.56695 0.38086-0.93948v-10.973c0-0.37254-0.12686-0.67709-0.38086-0.91416-0.23706-0.254-0.53323-0.38137-0.88883-0.38137-0.37253 0-0.67761 0.12737-0.91467 0.38137-0.23707 0.254-0.35554 0.55856-0.35554 0.91416v0.51935c-0.19125-0.22259-0.40648-0.43956-0.66042-0.64648-0.4572-0.37253-0.99921-0.67709-1.6257-0.91415-0.6096-0.23707-1.2785-0.35554-2.0066-0.35554zm25.857 0c-1.3039 0-2.4555 0.30456-3.4546 0.91416-0.99907 0.6096-1.778 1.4394-2.3368 2.4892-0.5588 1.0329-0.83819 2.2181-0.83819 3.5559 0 1.3208 0.26261 2.5065 0.78755 3.5564 0.54186 1.0499 1.2956 1.8796 2.2608 2.4892 0.98213 0.6096 2.1332 0.91416 3.454 0.91416 0.89747 0 1.7189-0.11008 2.4639-0.33021 0.74506-0.22014 1.3379-0.49953 1.7782-0.83819 0.4572-0.3556 0.68575-0.71991 0.68575-1.0924 0-0.33867-0.10169-0.61806-0.30489-0.8382-0.18627-0.23706-0.46566-0.35553-0.83819-0.35553-0.32174 0-0.56706 0.08492-0.73639 0.25425-0.16934 0.1524-0.3895 0.30494-0.66043 0.45733-0.22013 0.11854-0.49952 0.21971-0.83819 0.30438-0.32173 0.06773-0.73689 0.1018-1.2449 0.1018-0.84666 0-1.5915-0.20338-2.235-0.60978-0.62653-0.4064-1.1261-0.9568-1.4986-1.6511-0.3556-0.69427-0.5333-1.4816-0.5333-2.3621s0.1777-1.6679 0.5333-2.3621c0.37253-0.69427 0.88047-1.2447 1.5239-1.6511 0.6604-0.4064 1.4393-0.60927 2.3368-0.60927 0.28786 0 0.60971 0.03355 0.96531 0.10129 0.37254 0.06773 0.65193 0.15265 0.8382 0.25425 0.2032 0.11853 0.37251 0.237 0.50798 0.35553 0.13546 0.11853 0.27909 0.22022 0.43149 0.30489 0.16934 0.08467 0.38111 0.12712 0.63511 0.12712 0.32173 0 0.56757-0.11898 0.7369-0.35605 0.18627-0.254 0.27906-0.52448 0.27906-0.81235 0-0.4572-0.20287-0.85558-0.60927-1.1942-0.4064-0.3556-0.9657-0.62609-1.6769-0.81236-0.69427-0.2032-1.4984-0.30489-2.4128-0.30489zm43.586 0c-1.2531 0-2.3963 0.30456-3.4292 0.91416-1.016 0.59267-1.8285 1.4141-2.4381 2.4639-0.59266 1.0329-0.88935 2.2354-0.88935 3.607 0 1.3547 0.29669 2.5566 0.88935 3.6065 0.6096 1.0329 1.4221 1.846 2.4381 2.4386 1.0329 0.59266 2.1762 0.88883 3.4292 0.88883 1.27 0 2.4127-0.29617 3.4287-0.88883 1.016-0.59267 1.8206-1.4057 2.4133-2.4386 0.6096-1.0499 0.91416-2.2518 0.91416-3.6065 0-1.3716-0.30456-2.5741-0.91416-3.607-0.59266-1.0499-1.3973-1.8713-2.4133-2.4639-1.016-0.6096-2.1587-0.91416-3.4287-0.91416zm-91.364 0.07597c-0.59267 0-1.1431 0.10169-1.6511 0.30489-0.508 0.2032-0.97348 0.46581-1.3968 0.78755-0.4064 0.32173-0.74503 0.67713-1.016 1.0666-0.039495 0.05677-0.065546 0.11205-0.1018 0.16846v-0.80356c0-0.37254-0.12686-0.67709-0.38086-0.91416-0.23707-0.254-0.53324-0.38086-0.88883-0.38086-0.37253 0-0.67761 0.12686-0.91467 0.38086-0.23707 0.23707-0.35553 0.54162-0.35553 0.91416v10.77c0 0.37253 0.11847 0.68548 0.35553 0.93948 0.23707 0.23706 0.54214 0.35553 0.91467 0.35553 0.3556 0 0.65177-0.11847 0.88883-0.35553 0.254-0.254 0.38086-0.56695 0.38086-0.93948v-6.7314c0-0.59267 0.13576-1.1342 0.40669-1.6252 0.28787-0.49106 0.68573-0.88053 1.1937-1.1684 0.508-0.28787 1.0919-0.43201 1.7523-0.43201 0.69427 0 1.2363 0.14414 1.6257 0.43201s0.66047 0.67734 0.81287 1.1684c0.16933 0.49107 0.25373 1.0326 0.25373 1.6252v6.7314c0 0.37253 0.11898 0.68548 0.35605 0.93948 0.23707 0.23706 0.54162 0.35553 0.91416 0.35553s0.67709-0.11847 0.91416-0.35553c0.23707-0.254 0.35605-0.56695 0.35605-0.93948v-6.7055c0-0.59267 0.14363-1.1347 0.4315-1.6257 0.28787-0.49107 0.68573-0.88054 1.1937-1.1684 0.52493-0.3048 1.1178-0.45733 1.7782-0.45733 0.69427 0 1.2363 0.15253 1.6257 0.45733 0.4064 0.28787 0.68579 0.67734 0.83819 1.1684 0.16933 0.49106 0.25373 1.0331 0.25373 1.6257v6.7055c0 0.37253 0.11847 0.68548 0.35553 0.93948 0.254 0.23706 0.55907 0.35553 0.91467 0.35553 0.37253 0 0.67709-0.11847 0.91416-0.35553 0.23707-0.254 0.35553-0.56695 0.35553-0.93948v-6.7314c0-1.0329-0.12686-1.9639-0.38086-2.7936-0.254-0.84667-0.7027-1.5155-1.3462-2.0066-0.64347-0.50799-1.5493-0.76222-2.7177-0.76222-0.7112 0-1.3801 0.15253-2.0066 0.45733-0.62653 0.28787-1.1685 0.66057-1.6257 1.1178-0.41079 0.41079-0.7162 0.82118-0.93534 1.232-0.24968-0.75838-0.63691-1.3845-1.1731-1.8671-0.67733-0.62653-1.6424-0.93999-2.8954-0.93999zm100.81 0.15244c-0.33866 0-0.64322 0.12686-0.91415 0.38086-0.254 0.23706-0.38086 0.53375-0.38086 0.88935 0 0.28787 0.09279 0.54158 0.27905 0.76171l3.8602 4.8679-3.7584 4.6571c-0.2032 0.23707-0.30489 0.49968-0.30489 0.78755 0 0.32173 0.13576 0.59274 0.40669 0.81287s0.55032 0.33021 0.83819 0.33021c0.4064 0 0.74503-0.1777 1.016-0.5333l3.2794-4.192 3.3243 4.192c0.28787 0.3556 0.63488 0.5333 1.0413 0.5333 0.32173 0 0.61842-0.12685 0.88935-0.38085 0.27094-0.254 0.40618-0.55069 0.40618-0.88936 0-0.28786-0.0933-0.54157-0.27957-0.76171l-3.839-4.8416 3.7124-4.6581c0.11854-0.11854 0.19455-0.24539 0.22841-0.38086 0.0508-0.1524 0.07597-0.29655 0.07597-0.43201 0-0.3048-0.11847-0.56742-0.35554-0.78755-0.22013-0.23707-0.50791-0.35554-0.86351-0.35554-0.38947 0-0.72809 0.195-1.016 0.58446l-3.1936 4.2494-3.4101-4.3005c-0.27093-0.3556-0.61846-0.5333-1.0418-0.5333zm-78.511 2.1084c0.79587 0 1.4899 0.20287 2.0826 0.60927 0.6096 0.4064 1.084 0.95679 1.4227 1.6511 0.33866 0.69426 0.50797 1.4816 0.50797 2.3621 0 0.8636-0.16931 1.6509-0.50797 2.3621-0.33867 0.69426-0.81306 1.2447-1.4227 1.6511-0.59266 0.4064-1.2867 0.60978-2.0826 0.60978-0.79586 0-1.4988-0.20338-2.1084-0.60978-0.59266-0.4064-1.0581-0.9568-1.3968-1.6511-0.33867-0.7112-0.50798-1.4985-0.50798-2.3621 0-0.88053 0.16931-1.6679 0.50798-2.3621 0.33867-0.69427 0.81254-1.2447 1.4221-1.6511s1.3041-0.60927 2.0831-0.60927zm53.924 0c0.79587 0 1.4904 0.20287 2.0831 0.60927s1.0582 0.95679 1.3968 1.6511c0.3556 0.67733 0.53331 1.4563 0.53331 2.3368 0 0.8636-0.17771 1.6509-0.53331 2.3621-0.33866 0.7112-0.80414 1.27-1.3968 1.6764s-1.2872 0.60978-2.0831 0.60978c-0.8128 0-1.5241-0.20338-2.1337-0.60978-0.59266-0.4064-1.0581-0.9568-1.3968-1.6511-0.33867-0.7112-0.50798-1.5069-0.50798-2.3874 0-0.88054 0.16931-1.6595 0.50798-2.3368 0.33867-0.69427 0.80415-1.2447 1.3968-1.6511 0.6096-0.4064 1.3209-0.60927 2.1337-0.60927zm15.139 0c0.79587 0 1.5072 0.20287 2.1337 0.60927 0.64347 0.38946 1.1514 0.93147 1.5239 1.6257 0.37253 0.67733 0.55862 1.482 0.55862 2.4133 0 0.89746-0.18609 1.6932-0.55862 2.3874-0.37253 0.69426-0.88047 1.2363-1.5239 1.6257-0.62653 0.38946-1.3378 0.58394-2.1337 0.58394-0.77893 0-1.4902-0.19448-2.1337-0.58394-0.62653-0.38947-1.1345-0.93148-1.5239-1.6257-0.37254-0.69427-0.55863-1.49-0.55863-2.3874 0-0.93134 0.18609-1.736 0.55863-2.4133 0.38946-0.69427 0.8974-1.2363 1.5239-1.6257 0.64347-0.4064 1.3548-0.60927 2.1337-0.60927z" fill="#d3aa77"/>
    </g>
    </svg>
    <div class="jgjk_loading_bar">
      <div class="jgjk_loading_fill"></div>
    </div>
  </div>
</body>

<script type="module">
    (async () => {
      // let params = (new URL(document.location)).searchParams;
      // const app = params.get("app").replace(/\[^0-9a-z_-]/g, "")
      const app = "bevy_ggrs";
      console.log(`loading ${app}`);
      const appRoot = `https://johanhelsing.github.io/matchbox/${app}`

      const appModule = await import(`${appRoot}/app.js`)
      const init = appModule.default;

      const fetchWithProgress = async (path, progress) => {
        const response = await fetch(path)
        // May be incorrect if compressed
        const contentLength = response.headers.get("Content-Length")
        const total = parseInt(contentLength, 10)

        let bytesLoaded = 0
        const ts = new TransformStream({
          transform(chunk, ctrl) {
            bytesLoaded += chunk.byteLength
            progress(bytesLoaded / total)
            ctrl.enqueue(chunk)
          }
        })

        return new Response(response.body.pipeThrough(ts), response)
      }

      const initWasmWithProgress = async (wasmFile, progress) => {
        console.log("starting download")
        if (typeof TransformStream === "function" && ReadableStream.prototype.pipeThrough) {
          let done = false
          const response = await fetchWithProgress(wasmFile, function () {
            if (done) {
              return
            }
            if (arguments[0] >= 1) {
              progress(1)
              done = true
              console.log("Fetching wasm finished")
              window.jgjkSplash.loadingFinished()
            } else {
              progress.apply(null, arguments)
            }
          });
          await init(response)
        } else {
          // xhr fallback, this is slower and doesn't use WebAssembly.InstantiateStreaming,
          // but it's only happening on Firefox, and we can probably live with the game
          // starting slightly slower there...
          const xhr = new XMLHttpRequest()
          await new Promise(function (resolve, reject) {
            xhr.open("GET", wasmFile)
            xhr.responseType = "arraybuffer"
            xhr.onload = resolve
            xhr.onerror = reject
            xhr.onprogress = e => progress(e.loaded / e.total)
            xhr.send()
          })

          progress(1)
          window.jgjkSplash.loadingFinished()
          await init(xhr.response)
        }
      }

      const wasmFile = `${appRoot}/app.wasm`
      // await initWasmWithProgress(wasmFile, p => console.log(`progress: ${p}`));
      await initWasmWithProgress(wasmFile, jgjkSplash.loadingProgress)
      // init never returns on bevy apps :(
      // window.jgjkSplash.loadingFinished()
      console.log("Initialized wasm")
    })()
</script>

</html>
